<template>
   <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true">
         <el-form-item label="任务" prop="interfaceId">
            <el-select v-model="queryParams.interfaceId" placeholder="请选择所属系统" @change="getList" style="width: 200px">
               <el-option v-for="item in interfaceOptions" :label="item.name" :value="item.id" />
            </el-select>
         </el-form-item>
         <el-form-item label="执行时间">
            <el-date-picker
               v-model="dateRange"
               value-format="YYYY-MM-DD"
               type="daterange"
               range-separator="-"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
            ></el-date-picker>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="logList" row-key="id">
         <el-table-column prop="interfaceName" label="任务名称" show-overflow-tooltip></el-table-column>
         <el-table-column prop="triggerMode" label="触发方式" width="100" show-overflow-tooltip>
            <template #default="scope">
               <span v-if="scope.row.triggerMode === 1">定时任务</span>
               <span v-else-if="scope.row.triggerMode === 2">接口调用</span>
               <span v-else-if="scope.row.triggerMode === 3">手动调用</span>
               <span v-else-if="scope.row.triggerMode === 4">接收推送</span>
               <span v-else>-</span>
            </template>
         </el-table-column>
         <el-table-column label="执行结果" align="center" prop="result" width="80">
            <template #default="scope">
               <span v-if="scope.row.result === 1">成功</span>
               <span v-else-if="scope.row.result === 2">失败</span>
               <span v-else>-</span>
            </template>
         </el-table-column>
         <el-table-column prop="syncTime" label="执行时间" width="200" show-overflow-tooltip></el-table-column>
         <el-table-column label="操作" fixed="right" align="center" width="100" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="View" @click="showDetail(scope.row)">详情</el-button>
            </template>
         </el-table-column>
      </el-table>
      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
      />
   </div>
   <!-- 查看详情对话框 -->
   <el-dialog v-model="openDetail" width="1024px" append-to-body>
      <div class="section-title">基本信息</div>
      <el-row :gutter="10">
         <el-col :span="12">
            <el-form-item label="任务名称">
               <span>{{ detail.interfaceName || '-'}}</span>
            </el-form-item>
         </el-col>
         <el-col :span="12">
            <el-form-item label="触发方式">
               <span v-if="detail.triggerMode === 1">定时任务</span>
               <span v-else-if="detail.triggerMode === 2">接口调用</span>
               <span v-else-if="detail.triggerMode === 3">手动调用</span>
               <span v-else-if="detail.triggerMode === 4">接收推送</span>
               <span v-else>-</span>
            </el-form-item>
         </el-col>
         <el-col :span="12">
            <el-form-item label="调用结果">
               <span v-if="detail.result === 1">成功</span>
               <span v-else-if="detail.result === 2">失败</span>
               <span v-else>-</span>
            </el-form-item>
         </el-col>
         <el-col :span="12">
            <el-form-item label="执行时间">
               <span>{{ detail.syncTime || '-'}}</span>
            </el-form-item>
         </el-col>
         <el-col :span="24">
            <el-form-item label="初始参数">
               <highlightjs
                  v-if="detail.initParam"
                  style="width: 100%; margin-top: 0;"
                  autodetect
                  :code="detail.initParam"
               />
               <span v-else>-</span>
            </el-form-item>
         </el-col>
      </el-row>
      <div class="section-title">详细日志列表</div>
      <el-table :data="detail.detailLogs" row-key="id" style="margin-bottom: 30px;">
         <el-table-column label="配置类型" align="center" prop="configType" width="80px">
            <template #default="scope">
               <span v-if="scope.row.triggerMode === 'PULL'">拉取</span>
               <span v-else-if="scope.row.triggerMode === 'PUSH'">推送</span>
               <span v-else-if="scope.row.triggerMode === 'SERVER-PUSH'">服务器推送</span>
               <span v-else>-</span>
            </template>
         </el-table-column>
         <el-table-column prop="triggerMode" label="触发方式" width="80" show-overflow-tooltip>
            <template #default="scope">
               <span v-if="scope.row.triggerMode === 1">定时任务</span>
               <span v-else-if="scope.row.triggerMode === 2">接口调用</span>
               <span v-else-if="scope.row.triggerMode === 3">手动调用</span>
               <span v-else-if="scope.row.triggerMode === 4">接收推送</span>
               <span v-else>-</span>
            </template>
         </el-table-column>
         <el-table-column label="操作结果" align="center" prop="result" width="80">
            <template #default="scope">
               <span v-if="scope.row.result === 1">成功</span>
               <span v-else-if="scope.row.result === 2">失败</span>
               <span v-else>-</span>
            </template>
         </el-table-column>
         <el-table-column prop="sort" label="调用顺序" width="80"></el-table-column>
         <el-table-column prop="syncTime" label="执行时间" width="180"></el-table-column>
         <el-table-column prop="enterParam" label="入参" show-overflow-tooltip></el-table-column>
         <el-table-column prop="covertParam" label="转换后的入参" show-overflow-tooltip></el-table-column>
         <el-table-column prop="outParam" label="出参" show-overflow-tooltip></el-table-column>
      </el-table>
      <div class="section-title">异常日志</div>
      <el-row :gutter="10">
         <el-col :span="12">
            <el-form-item label="异常编码">
               <span>{{ detail?.exceptionLog?.exceptionCode || '-'}}</span>
            </el-form-item>
         </el-col>
         <el-col :span="12">
            <el-form-item label="异常时间">
               <span>{{ detail?.exceptionLog?.exceptionTime || '-'}}</span>
            </el-form-item>
         </el-col>
         <el-col :span="24">
            <el-form-item label="异常信息">
               <highlightjs
                  v-if="detail?.exceptionLog?.message"
                  style="width: 100%; margin-top: 0;"
                  autodetect
                  :code="detail?.exceptionLog?.message"
               />
               <span v-else>-</span>
            </el-form-item>
         </el-col>
         <el-col :span="24">
            <el-form-item label="异常入参">
               <highlightjs
                  v-if="detail?.exceptionLog?.enterParam"
                  style="width: 100%; margin-top: 0;"
                  autodetect
                  :code="detail?.exceptionLog?.enterParam"
               />
               <span v-else>-</span>
            </el-form-item>
         </el-col>
      </el-row>
      <template #footer>
         <div class="dialog-footer">
            <el-button @click="cancel">返 回</el-button>
         </div>
      </template>
   </el-dialog>
</template>

<script setup name="Log">
import { ref, watch, defineProps, onActivated } from "vue";
import { logGetListByPage, logGetDetail, logGetFailListByPage  } from "@/api/log";
import { missionGetList } from "@/api/mission";

const props = defineProps({
   visible: {
      type: Boolean,
      default: null
   },
   id: {
      type: Number,
      default: null
   },
   failOnly: {
      type: Boolean,
      default: true
   }
})

const { proxy } = getCurrentInstance();
const logList = ref([]);
const openDetail = ref(false);
const loading = ref(false);
const total = ref(0);
const dateRange = ref([]);

const data = reactive({
   queryParams: {
      pageNum: 1,
      pageSize: 10,
      interfaceId: props.id,
   },
   detail: {},
});

const { queryParams, detail } = toRefs(data);

// 获取任务选项
const interfaceOptions = ref([]);
/** 获取系统选项 */
function getInterfaceOption() {
   missionGetList().then(response => {
      interfaceOptions.value = response.data;
   });
}

/** 查询系统列表 */
function getList() {
   if(props.visible && !props.id) return
   loading.value = true;
   const [startTime = null, endTime = null] = dateRange.value
   if(props.failOnly){
      logGetFailListByPage({
         ...queryParams.value,
         startTime: startTime ? startTime + ' 00:00:00' : null,
         endTime: endTime ? endTime + ' 23:59:59' : null
      }).then(response => {
         logList.value = response.data.records;
         total.value = response.data.total;
         loading.value = false;
      });
      return
   }
   logGetListByPage({
      ...queryParams.value,
      startTime: startTime ? startTime + ' 00:00:00' : null,
      endTime: endTime ? endTime + ' 23:59:59' : null
   }).then(response => {
      logList.value = response.data.records;
      total.value = response.data.total;
      loading.value = false;
   });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  logList.value = [];
  total.value = 0;
  loading.value = false;
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 取消按钮 */
function cancel() {
   openDetail.value = false;
}
function showDetail(row) {
   openDetail.value = true
   logGetDetail({id: row.id}).then(response => {
      detail.value = response.data;
      openDetail.value = true;
   });
}

getInterfaceOption()
getList()
</script>
<style lang='scss' scoped>
   .section-title{
      margin-bottom: 20px;
      font-weight: bold;
      font-size: 18px;
   }
   .break-all{
      white-space: pre-wrap;
      word-break: break-all;
   }
   :deep(.el-popper){
      max-width: 70%;
      white-space: pre-wrap;
      word-break: break-all;
   }
</style>